<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Translation Management Grid Test</title>

<link rel="stylesheet" href="../css/jqueryUI/1.10.3/themes/smoothness/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" type="text/css" href="../css/jqgrid/ui.jqgrid.css"/>
<style type="text/css">
    .html, body {
        font-family: 'Verdana', '宋体';
        font-size: 10px;
    }

    .ui-menu {
        width: 150px;
    }

    .ui-icon-custom {
        /*width: 32px;*/
        /*height: 32px;*/
        background-size: contain;
        background-image: url(../images/navigator/icon_admin.png) !important;
    }
</style>

<script src="../js/lib/jquery-1.11.0.min.js"></script>
<script src="../js/lib/jquery-ui-1.10.3.custom.min.js"></script>
<script src="../js/lib/jqgrid/i18n/grid.locale-en.js"></script>
<script src="../js/lib/jqgrid/jquery.jqGrid.src.js"></script>
<style>

</style>
<script>
$(
        function () {
            var __indexOf = [].indexOf || function (item) {
                for (var i = 0, l = this.length; i < l; i++) {
                    if (i in this && this[i] === item) return i;
                }
                return -1;
            };

            $.jgrid.extend({
                getId:function () {
                    return "#" + (this.attr('id'));
                },
                addColumns:function (newColNames, newColModelEntrys) {
                    var gridParam;
                    gridParam = this.getGridParam();
                    gridParam.colNames = $.grep(gridParam.colNames, function (val, key) {
                        return "" !== val;
                    });
                    gridParam.colModel = $.grep(gridParam.colModel, function (val, key) {
                        return "rn" !== val.name;
                    });
                    $.merge(gridParam.colModel, newColModelEntrys);
                    return $.merge(gridParam.colNames, newColNames);
                },
                reloadAll:function (url, postData) {
                    var gridParam, newGrid;
                    if (url == null) {
                        url = this.getGridParam('url');
                    }
                    if (postData == null) {
                        postData = this.getGridParam('postData');
                    }
                    gridParam = this.getGridParam();
                    $(gridParam.colModel).each(function (index, colModel) {
                        if (colModel.editable) {
                            return colModel.classes = 'editable-column';
                        }
                    });
                    this.GridUnload(this.getId());
                    gridParam.url = url;
                    if (postData) {
                        gridParam.postData = postData;
                    }
                    delete gridParam.selarrrow;
                    newGrid = $(this.getId()).jqGrid(gridParam);
                    var af = this.getGridParam('afterCreate')
                    if (af) {
                        return af(newGrid);
                    }
                    return newGrid;
                },
                addTaskLanguage:function (language) {
                    var colModels, cols, level;
                    cols = ['T', 'N', 'I'];
                    level = $("input:radio[name='viewOption'][checked]").val();
                    colModels = $(cols).map(
                            function (index, elem) {
                                var model;
                                model = {
                                    name:"" + language.name + "." + this,
                                    sortable:false,
                                    index:"s(" + language.id + ")[" + index + "]",
                                    width:40,
                                    align:'right',
                                    search:false,
                                    editable:false
                                };
                                if (elem === 'T') {
                                    model.classes = 'language-group-border';
                                }
                                if (level !== 'application') {
                                    model.formatter = 'showlink';
                                    model.formatoptions = {
                                        baseLinkUrl:'#',
                                        addParam:encodeURI("&languageId=" + language.id + "&languageName=" + model.name)
                                    };
                                }
                                return model;
                            }).get();
                    this.getGridParam('groupHeaders').push({
                        startColumnName:"" + language.name + ".T",
                        numberOfColumns:cols.length,
                        titleText:"<bold>" + language.name + "</bold>"
                    });
                    return this.addColumns(cols, colModels);
                },
                updateTaskLanguage:function (languages) {
                    var cols, gridParam,
                            _this = this;
                    if ($.isEmptyObject(languages)) {
                        return;
                    }
                    if ($.isArray(languages) && 0 === languages.length) {
                        return;
                    }
                    cols = ['T', 'N', 'I'];
                    gridParam = this.getGridParam();
                    gridParam.colNames = $.grep(gridParam.colNames, function (val, key) {
                        return !(__indexOf.call(cols, val) >= 0);
                    });
                    gridParam.colModel = $.grep(gridParam.colModel, function (val, key) {
                        return !/.+\.[TIN]/g.test(val.name);
                    });
                    if ($.isArray(languages)) {
                        $(languages).each(function (index, language) {
                            return _this.addTaskLanguage(language);
                        });
                        return;
                    }
                    return this.addTaskLanguage(languages);
                }
            });


            var colNames = ['ID', 'Application', 'Version', 'Dictionary', 'Version', 'Encoding', 'Format', 'Num of String'];
            var colModel = [
                {name:'id', index:'id', width:55, align:'center', hidden:true, frozen:true},
                {name:'application', index:'base.name', width:100, editable:false, align:'left', frozen:true, stype:'select',
                    searchoptions:{ value:":All", dataEvents:[
                        {type:'change', fn:function (e) {
                            searchvalue = $("#transGrid").jqGrid('getGridParam', 'searchvalue');
                            searchvalue.app = e.target.value;
                            $("#transGrid").jqGrid('setGridParam', 'searchvalue', searchvalue);
                        }
                        }
                    ]
                    }
                },
                {name:'appVersion', index:'version', width:90, editable:false, align:'left', frozen:true, search:false},
                {name:'dictionary', index:'base.name', width:90, editable:false, align:'left', frozen:true, search:false},
                {name:'dictVersion', index:'version', width:90, editable:false, align:'left', frozen:true, search:false},
                {name:'encoding', index:'base.encoding', width:90, editable:false, align:'left', frozen:true, stype:'select',
                    searchoptions:{
                        value:':All;ISO-8859-1:ISO-8859-1;UTF-8:UTF-8;UTF-16LE:UTF-16LE;UTF-16BE:UTF-16BE',
                        dataEvents:[
                            {
                                type:'change', fn:function (e) {
                                var searchvalue = $("#transGrid").jqGrid('getGridParam', 'searchvalue');
                                searchvalue.encoding = e.target.value;
                                $("#transGrid").jqGrid('setGridParam', 'searchvalue', searchvalue);
                            }
                            }
                        ]
                    }
                },
                {name:'format', index:'base.format', width:90, editable:false, align:'left', frozen:true,
                    stype:'select', searchoptions:{
                    value:":All;DCT:DCT;Dictionary conf:Dictionary conf;Text properties:Text properties;XML labels:XML labels",
                    dataEvents:[
                        {
                            type:'change', fn:function (e) {
                            var searchvalue = $("#transGrid").jqGrid('getGridParam', 'searchvalue');
                            searchvalue.format = e.target.value;
                            $("#transGrid").jqGrid('setGridParam', 'searchvalue', searchvalue);
                        }
                        }
                    ]
                }  },
                {name:'numOfString', index:'labelNum', width:80, align:'right', frozen:true, search:false}
            ]

            var grid = $('#testGrid').jqGrid({
                url:'../json/transgrid.json',
                caption:'Translation Management Grid Test',
                mtype:'post', postData:{}, datatype:'json',
                width:$(window).innerWidth() * 0.95, height:230,
                rownumbers:true, shrinkToFit:false,
                pager:'#testPager', rowNum:60, rowList:[10, 20, 30, 60, 120],
                sortname:'base.name', sortorder:'asc', multiselect:true,
                colNames:colNames, colModel:colModel, groupHeaders:[],
                afterCreate:function (grid) {
                    grid.setGroupHeaders({useColSpanStyle:true, groupHeaders:grid.getGridParam('groupHeaders')});
                    grid.filterToolbar({stringResult:true, searchOnEnter:false});
                    grid.navGrid('#testPager', {edit:false, add:false, del:false, search:false, view:false});
                    grid.navGrid('#testPager', {edit:true, add:true, del:false, search:false, view:false});
                    //            grid.setFrozenColumns();
                }
            });
            grid.getGridParam('afterCreate')(grid);

            // add language button handler
            $('#addColumn').button({label:'Add Language Column'}).on('click', function (e) {
                grid.updateTaskLanguage([
                    {name:'Chinese', id:1},
                    {name:'English', id:2},
                    {name:'French', id:3},
                    {name:'Japanese', id:4},
                    {name:'German', id:5},
                    {name:'Russian', id:6}
                ]);
            });

            $('#recreateGrid').button({label:'Recreate the grid'}).on('click', function (e) {
                $('#testGrid').reloadAll();
            });

            $('#IsFrozenColumn').button({label:'Frozen Column'}).on('click', function (e) {
                $('#testGrid').setFrozenColumns();
            });

            $('#setContexts').button({
                        icons:{secondary:"ui-icon-triangle-1-s"}
                    }
            ).on('click',
                    function () {
                        var menu = $(this).next().show().position({my:"right top", at:"right bottom", of:this});
                        $(document).one("click", function () {
                            menu.hide();
                        });
                        return false;
                    }
            ).next().menu({select:function (event, ui) {
                        console.log(ui.item);
                    }
                    }).hide()

//            $( "#menu" ).menu();

            $('#myTestButton').button({icons:{primary:"ui-icon-custom"}});
            $('#button2').button();

        });
</script>
</head>
<body>

<h2 align='center'>JQGrid Test</h2>

<table style="width: 100%" border="0">
    <tr>
        <td></td>
    </tr>
    <tr>
        <td align='center'>
            <table id="testGrid">
                <tr>
                    <td></td>
                </tr>
            </table>
            <div id="testPager"/>
        </td>
    </tr>
    <tr>
        <td align='center'>
            <button id="addColumn"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button id="recreateGrid"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            IsFrozen:
            <input type="checkbox" id="IsFrozenColumn"/>
        </td>
    </tr>
    <!--<tr>-->
    <!--<td>-->
    <!--<button id="setContexts">PopMenu</button>-->
    <!--<ul id="testMenu">-->
    <!--&lt;!&ndash;<li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li>&ndash;&gt;-->
    <!--<li><a href="#">Default</a></li>-->
    <!--<li><a href="#">Exclusion</a></li>-->
    <!--<li><a href="#">Dictionary</a></li>-->
    <!--<li><a href="#">Application</a></li>-->
    <!--<li><a href="#">Product</a></li>-->
    <!--<li><a href="#">Custom</a></li>-->
    <!--</ul>-->
    <!--</td>-->
    <!--</tr>-->

    <!--<tr>-->
    <!--<td>-->
    <!--<ul id="menu">-->
    <!--<li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li>-->
    <!--<li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>Zoom In</a></li>-->
    <!--<li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</a></li>-->
    <!--<li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>Print...</a></li>-->
    <!--<li>-->
    <!--<a href="#">Playback</a>-->
    <!--<ul>-->
    <!--<li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>Prev</a></li>-->
    <!--<li><a href="#"><span class="ui-icon ui-icon-stop"></span>Stop</a></li>-->
    <!--<li><a href="#"><span class="ui-icon ui-icon-play"></span>Play</a></li>-->
    <!--<li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>Next</a></li>-->
    <!--</ul>-->
    <!--</li>-->
    <!--</ul>-->
    <!--</td>-->
    <!--</tr>-->

    <tr>
        <td align='center'>
            <button id="myTestButton">MyTestButton</button>

            <span id="button2">
                <img src="../images/navigator/icon_admin.png"/>
                AnotherButton
            </span>
        </td>
    </tr>
</table>

</body>
</html>